<template>
  <div id="logintwo">
    <div style="display: flex; width: 100%; height: 100%; overflow: hidden">
      <!--      <div class="name">全球豪车信息共享系统</div>-->
      <div class="login-modal">
        <div class="title">登录</div>
        <el-form
          class="login-form"
          :rules="rules"
          ref="ruleForm"
          :model="ruleForm"
          label-width="0"
        >
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              v-model="ruleForm.username"
            >
            </el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              v-model="ruleForm.password"
            >
            </el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item  prop="validate">
            <div class="validate flex">
              <el-input v-model="ruleForm.validate"></el-input>
              <img  src="/user/validate?id=5" alt="" class="validate" style="width: 100px;height:26px;" @click="validates()"/>
            </div>
          </el-form-item>
          <el-form-item>
            <el-row :span="24">
              <el-col :span="12">
                <el-checkbox v-model="ruleForm.rememberPwd"
                  >记住密码</el-checkbox
                >
              </el-col>
              <el-col :span="12">
                <el-popover
                  placement="top-start"
                  title=""
                  width="200"
                  trigger="hover"
                  content="忘记密码请联系系统管理员"
                >
                  <span style="color: #fff; float: right" slot="reference"
                    >忘记密码</span
                  >
                </el-popover>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              style="width: 100%;height: 40px;"
              @click.native.prevent="handleLogin"
              class="login-submit"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import $ from "jquery";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        validate: "",
        rememberPwd: false,
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // { max: 6, message: "密码不能大于6位", trigger: "blur" },
        ],
        validate: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
      src: "",
      loading:false
    };
  },
  created() {
    console.log(this.$store.getters);
  },
  methods: {
    // 验证码
    validates() {
      $(".validate").attr("src","/user/validate?id=" + Math.random());

    },
    // 登录
   async handleLogin() {
     try {
       await this.$refs.ruleForm.validate()
       const res = await this.$store.dispatch('user/login',{
        username: this.ruleForm.username,
        password : this.ruleForm.password ,
        code : this.ruleForm.validate
      })
      if(res.code == '1'){
        this.$router.push('/')
      }else{
        this.$message.error(res.msg)
      }
     } catch (error) {
     console.log(error);
     }
   },
  },
};
</script>

<style scoped>
#logintwo {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url("../assets/img/ng.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  overflow: auto;
  position: fixed;
  line-height: 100%;
  margin: -8px;
}
.logo {
  width: auto;
  height: 60px;
  display: flex;
  overflow: hidden;
  background-color: #1fb494;
}
.logo img {
  width: 32px;
  height: 32px;
  margin: 14px 10px 0 15px;
}
.logo .title {
  font-size: 16px;
  text-overflow: ellipsis;
  color: white;
  line-height: 61px;
}
.top-box {
  height: 60px;
  display: flex;
  background-color: #1fb494;
}
.top-box-i {
  width: 32px;
  height: 32px;
  font-size: 24px;
  margin: 16px 10px 0 15px;
  color: #ffffff;
}

.avue-home {
  /*background-color: #303133;*/
  background-color: rgba(39, 51, 59, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.avue-home__main {
  user-select: none;
  width: 100%;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.avue-home__footer {
  width: 100%;
  flex-grow: 0;
  text-align: center;
  padding: 1em 0;
}

.avue-home__footer > a {
  font-size: 12px;
  color: #ababab;
  text-decoration: none;
}

.avue-home__loading {
  height: 32px;
  width: 32px;
  margin-bottom: 20px;
}

.avue-home__title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
}

.avue-home__sub-title {
  color: #ababab;
  font-size: 12px;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  display: none;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(39, 51, 59, 1);
}
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
a {
  color: #ffffff;
  text-decoration: none;
}
.name {
  line-height: 50px;
  font-size: 30px;
  font-weight: 700;
  color: #ffffff;
  margin-left: 10px;
}
.login-modal {
  position: fixed;
  width: 420px;
  height: 380px;
  bottom: 0px;
  left: 100px;
  /* margin: 0 auto; */
  top: 50%;
  margin-top: -225px;
  background-image: url("../assets/img/lo.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 5px;
}
.title {
  height: 100px;
  line-height: 100px;
  font-weight: 650;
  text-align: center;
  font-size: 28px;
  color: #fff;
}
.login-form {
  margin: 20px 40px;
}
</style>
